<template>
    <div class="containBox">
  <div class="contain">
  <div class="head">
  <div class="title">
  <h3>{{h3Title}}</h3>
  <span class="tagone" >{{tagone}}</span>
  <span class="tagtow" >{{tagtow}}</span>
  </div>
 <div><span class="more" >{{more}} </span></div>
  </div>
  </div>
  <div class="goodsBox">
   <div class="hover" v-for="(i,index) in list"  :key="index">
   <router-link :to="`/product/${i.id}`">
   <img :src="i.picture" alt="">
    <p>{{i.desc}}</p>
    <span>{{i.price}}</span>
   
   </router-link>
   </div>
  </div>
    </div>
</template>

<script setup>

import Skeleton from '@/components/library/Skeleton.vue'
import {ref,reactive,defineProps} from 'vue'
const props = defineProps({
    h3Title:{
        type:String,
        default:'新鲜好物'
    },
    tagone:{
        type:String,
        default:'新鲜出炉'
    },
    tagtow:{
        type:String,
        default:'品质靠谱'
    },
    more:{
        type:String,
        default:'查看更多 >'
    },
    list:{
         type:Object,
         default:4
        
    },
})
// const loading = ref(true)
// const rowWidth = reactive({
//     width:'300px'
// })
</script>

<style lang="less" scoped>
.containBox{
    width: 1240px;
    margin: 0 auto;
    height: 541px;
    background-color: #fff;
}
.head{
    height: 115px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
         display: flex;
          align-items: center;
          span{
            color:#999999;
          }
          .tagone{
            margin-left: 20px;
          }
          .tagtow{
            margin-left: 20px;
          }
          
    }
    .more{
          color:#999999;
    }
}
.goodsBox{
    height: 426px;
    width: 100%;
    display: flex;
    div{
      cursor: pointer;
        width: 306px;
        height: 406px;
        background-color: #f9f0f4;
         margin-left: 5px;
         img{
            width: 306px;
            height: 306px;
         }
         p{
    width: 100%;
    padding: 10px;
    font-size: 22px;
     color: #333333;
     white-space: nowrap;
   /* 强制一行内显示，不允许换行 */
     overflow: hidden;
   /* 溢出部分隐藏 */
     text-overflow: ellipsis;
   /* 文字溢出用省略号显示 */
     
  }
  span{
     padding: 10px;
    text-align: center;
    font-size: 22px;
    color: #cf4444;
  }

    }
    
}
.goodsBox>div:nth-child(1){
    margin-left: 0;
}
.hover:hover{
     transform: translate(0,-3px,0);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
   
}
</style>